<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        #app {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
        }

        p {
            margin: 10px 0;
            color: #555;
            font-size: 16px;
        }

        a {
            text-decoration: none;
            color: #007BFF;
            margin-right: 10px;
            display: inline-block;
            margin-bottom: 10px;
            font-size: 16px;
            transition: color 0.3s;
        }

        a:hover {
            text-decoration: underline;
            color: #0056b3;
        }

        .router-link-active {
            font-weight: bold;
            color: #0056b3;
        }

        .container {
            margin-top: 20px;
        }

        .section {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }

        .section-title {
            font-size: 1.2em;
            margin-bottom: 10px;
            color: #333;
            font-weight: bold;
        }

        .section-content {
            margin-left: 20px;
        }

        .section-content p {
            margin: 5px 0;
        }

        .section-content a {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <!-- 一级董事会 -->
    <template id="dsh">
        <div>
            <h1>董事会</h1>
            <router-link to="/dsh/scjlb">市场经理</router-link>
            <router-link to="/dsh/rsjlb">人事经理</router-link>
            <router-link to="/dsh/cpjlb">产品经理</router-link>
            <router-view></router-view>
        </div>
    </template>
    <!-- 二级市场经理部 -->
    <template id="scjlb">
        <div>
            <p>市场部</p>
            <router-link to="/dsh/scjlb/scjlb/sjbm">设计部</router-link>
            <p>业务部</p>
            <router-link to="/dsh/scjlb/scjlb/kfbm">客服部</router-link>
            <router-view></router-view>
        </div>
    </template>
    <!-- 二级人事经理部 -->
    <template id="rsjlb">
        <div>
            <p>财务部</p>
            <p>行政部</p>
            <p>人力资源部</p>
        </div>
    </template>
    <!-- 二级产品经理部 -->
    <template id="cpjlb">
        <div>
            <p>网络部</p>
            <router-link to="/dsh/cpjlb/cpjlb/kfbmfour">开发部</router-link>
            <router-view></router-view>
            <p>技术部</p>
        </div>

    </template>
    <!-- 三级设计部门 -->
    <template id="sjbm">
        <div>
            <p>设计一部</p>
            <p>设计二部</p>
        </div>
    </template>
    <!-- 三级客服部门 -->
    <template id="kfbm">
        <div>
            <p>客服服务</p>
            <p>技术支持</p>
        </div>
    </template>
    <!-- 三级开发部门 -->
    <template id="kfbmfour">
        <div>
            <p>开发一部</p>
            <p>开发二部</p>
        </div>
        </div>
    </template>

</body>

</html>
<script type="module">
    import { } from './js/2.7.14_dist_vue.js';
    import { } from './js/vue-router.js';

    let dsh = { template: '#dsh' }
    let scjlb = { template: '#scjlb' }
    let rsjlb = { template: '#rsjlb' }
    let cpjlb = { template: '#cpjlb' }
    let sjbm = { template: '#sjbm' }
    let kfbm = { template: '#kfbm' }
    let kfbmfour = { template: '#kfbmfour' }

    let routes = [
        { path: '/', redirect: "/dsh" },
        {
            path: '/dsh', component: dsh,
            children: [
                {
                    path: 'scjlb', component: scjlb,
                    children: [
                        { path: 'scjlb/sjbm', component: sjbm },
                        { path: 'scjlb/kfbm', component: kfbm },
                    ],
                },
                {
                    path: 'rsjlb', component: rsjlb,
                },
                {
                    path: 'cpjlb', component: cpjlb,
                    children: [
                        {
                            path: 'cpjlb/kfbmfour', component: kfbmfour,
                        }
                    ]
                }
            ]
        }
    ]

    let router = new VueRouter({
        routes
    })


    new Vue({
        el: "#app",
        data: {
            msg: "hello vue"
        },
        methods: {
            //自定义方法
        },
        computed: {
            //计算属性
        },
        components: {

        },
        router,
    })
</script>